<template>
  <view class="content">
    <swiper class="swiper" 
      vertical 
      :circular="circular" 
      @change="changeHandler" 
      :current="current"
    >
        <swiper-item v-for="(item, index) in curQueue" :key="index" wx:key="index">
          <view style="width:100%; height:100%; background-color: black;" v-if="!item">
            <text>加载中...</text>
          </view>
          <image :src="item.url" mode="cover" class="swiper-image" v-else></image>
        </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { sleep } from '@/utils';
import { VideoSwiper } from '@/utils/VideoSwiper';

export default {
  data() {
    return {
      list: [],
      curQueue: [],
      current: 0,
      circular: false,
      seq: 1,
      videoSwiper: null
    };
  },
  
  onLoad(options) {
    this.seq = options.seq || 1;
  },
  
  onReady() {
    this.getData();
  },
  
  methods: {
    async getData() {
      await sleep(500);
      
      // 获取数据
      this.list = Array.from({ length: 4 }, (_, index) => ({
        url: `https://dummyimage.com/350x640/02adea&text=${index + 1}`,
        id: index + 1,
        seq: index + 1
      }));
      
      // 初始化VideoSwiper
      this.initVideoSwiper();
    },
    
    initVideoSwiper() {
      // 创建VideoSwiper实例
      this.videoSwiper = new VideoSwiper({
        list: this.list,
        seq: this.seq,
        // 回调函数，用于接收状态更新
        onQueueChange: (queue) => {
            this.curQueue = queue;
        },
        onCurrentChange: (current) => {
            this.current = current;
        },
        onCircularChange: (circular) => {
          this.circular = circular;
        }
      });
      
      // 初始化
      this.videoSwiper.init();
    },
    
    // 处理swiper的change事件
    changeHandler({ detail }) {
      // 直接委托给VideoSwiper处理
      this.videoSwiper.handleChange(detail);
    },
    
    // 跳转到指定序号的视频
    goToSeq(seq) {
      if (this.videoSwiper) {
        this.videoSwiper.goToSeq(seq);
      }
    }
  }
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-image {
  width: 100%;
  height: 100%;
}
</style>
